import React, { useState, useEffect } from 'react';
import Taro, { useReachBottom, useDidShow } from '@tarojs/taro';
import { View, Text } from '@tarojs/components';
import cls from 'classnames';
import { COUPON_TAB_STATUS } from '@/utils/constants';

import './index.scss'
import { network } from '@/utils/network';
import { getUserId, toDate } from '@/utils/utils';


export default () => {
  const [status, setStatus] = useState('ALL');
  const [list, setList] = useState([]);

  const fetchData = () => {
    network.get('/xxm/coupon/list', { user_id: getUserId(), }).then(res => {
      console.log(res, 'res');
      if(res?.code === 0) {
        setList(res.data);
      }
    })
  }

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <View className='coupon_container'>
      <View className='coupon_tabs'>
        {
          Object.keys(COUPON_TAB_STATUS).map((key: string) => (
            <Text
              key={key}
              className={cls('status', {
                'curr': status === key
              })}
              onClick={() => setStatus(key)}
            >{COUPON_TAB_STATUS[key]}</Text>
          ))
        }
      </View>
      <View className='coupon_list'>
        {
          list.map((item: any) => {
            return (
              <View className='coupon_li'>
                <View className='coupon_left'>
                  <View className='coupon_amount'>
                    <View className='coupon_mark'>¥</View><View className='coupon_number'>{item?.sms_coupon?.amount}</View></View>
                  <View className='coupon_info'>{item?.sms_coupon?.note}</View>
                </View>
                <View className='coupon_right'>
                  <View className='coupon_name'>{item?.sms_coupon?.name}</View>
                  <View className='coupon_date'>{toDate(item?.sms_coupon?.coupon_end_time, 1)}之前有效</View>
                  <View className='coupon_opt'>
                    <View className='coupon_type'>官方赠送</View>
                    <View className='coupon_btn'>立即使用</View>
                  </View>
                </View>
              </View>
            )
          })
        }
      </View>
    </View>
  )
}
